<template>
  <div class="search-popup">
    <!-- 搜索栏 -->
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />

    <!-- 底下展示三个界面之一  
      :hotKeywordList="hotKeywordList" -->
    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    />
    <SearchTipsList
      v-else-if="blockShow == 2"
      :SearchTipsListData="SearchTipsListData"
      @tagClick="tagClick"
    />
    <SearchproductsList
      v-else-if="blockShow == 3"
      :productsListData="productsListData"
      :filterCategory="filterCategory"
      @categoryChange="categoryChange"
      @priceChange="priceChange"
    />
  </div>
</template>

<script>
// 引入vuex
import { mapMutations } from "vuex";

// 引入组件
import HistoryHot from "../components/search/HistoryHot";
import SearchTipsList from "../components/search/SearchTipsList.vue";
import SearchproductsList from "../components/search/SearchproductsList.vue";
import {
  GetHishotData,
  GetSearchTipsData,
  GetGoodsListData,
} from "@/request/api";

export default {
  data() {
    return {
      // 搜索框的值,用户输入的值
      searchVal: "",

      // 搜索框中的提示热词
      placeVal: "",

      // blockShow变量用来控制切换搜索页面对应的界面
      // 1.表示历史和热门界面
      // 2. 搜索提示列表
      // 3.表示搜索产品
      blockShow: 1,

      // 历史记录的数组
      historyKeywordList: [],

      // 热门搜索数组
      hotKeywordList: [],

      //搜索提示框列表的数据
      SearchTipsListData: [],

      // 搜索产品列表的数据
      productsListData: [],

      // 这是分类列表
      filterCategory: [],

      //防抖处理的定时器
      timer:null,
    };
  },
  components: {
    HistoryHot,
    SearchTipsList,
    SearchproductsList,
  },
  created() {
    GetHishotData().then((res) => {
      if (res.errno == 0) {
        // console.log(res.data);
        let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
        this.placeVal = defaultKeyword.keyword;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
      }
    });
  },
  methods: {
    tagClick(value) {
      this.onSearch(value);
    },

    priceChange(value) {
      this.sort = "price";
      this.order = value;
      //发送搜索请求
      this.onSearch(this.searchVal);
    },
    categoryChange(id) {
      this.categoryId = id;
      //  onSearch 就是发送搜索请求
      this.onSearch(this.searchVal);
    },
    ...mapMutations({
      chanIsShowShadow: "showshadow/chanIsShowShadow",
    }),
    onSearch(value) {
      //value使用户输入的信息(用户输入的值)
      // 回车之后执行这里的代码
      // 搜索的时候
      this.blockShow = 3;

      // 发起搜索请求
      GetGoodsListData({
        keyword: value,
        // 细化搜索请求：为后面点击 价格由高到低(低到高)，或者点击分类选项 发起请求做准备
        order: this.order, // 告诉后端是由高到低或者低到高
        sort: this.sort, // 告诉后端按照id排序还是price来排序
        categoryId: this.categoryId, // 请求的分类id
      })
        .then((res) => {
          let { data, filterCategory } = res.data;
          this.productsListData = data;

          // 把name处理成text      把id处理成 value,但是数据还是原来的数据
          let newArr = filterCategory.map((item) => {
            // return 就是新素组每个元素的样子
            return { text: item.name, value: item.id, checked: item.checked };
          });
          this.filterCategory = newArr;
          // 总结经验: 有时候,后端给我们的数据跟我们需要的格式有点不一样,我们就需要把后端给我们的数据处理成我们想要的格式
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onCancel() {
      this.$router.go(-1);
      this.chanIsShowShadow(false);
    },
    onInput(value) {
       //防抖  在每一次执行操作的时候,先判断定时器启动了没有
      //      如果定时器启动了,就应该先清除定时器
      // 作用: 减少输入起见的请求 减少服务器的压力

      // 解:
      //      如果不清除定时器的话, 每次都触发定时器的话,每次都会发送新的请求
      //      如果清除定时器的话, 就会永远触发一次定时器,也就是永远只请求一次

      // if(下面这个定时器启动了){
      //   清除下面这个定时器
      // }

      //1.先清除定时器
      if(this.timer){
        clearTimeout(this.timer)
      }

      //弄个定时器来避免用户快速点击多次请求的问题
      //2.以后永远只有这个定时器了.
     this.timer = setTimeout(() => {
     
      // value就是用户输入的内容
      // 用户正在输入的时候,要切换  到第2个界面
      this.blockShow = 2;

      // 发送请求, 请求和用户输入相关的提示;
     
        console.log(value);
        GetSearchTipsData({
          
          keyword: value,
        }).then((res) => {
          if (res.errno == 0) {
            // console.log(res.data);
            this.SearchTipsListData = res.data;
          }
        });
      }, 500);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  position: absolute;
  width: 100%;
  height: 100%;
  /* right: -100%; */
  top: 0;
  background-color: #efefef;
}
</style>